<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页广告位模块</title>
    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet"/>
    <link href="../../resource/lib/imageview/css/imageviewer.css" rel="stylesheet"/>

    <style>
        .gray-bg {
            margin: 0 20px;
        }

        .input-sm {
            width: 200px !important;
        }

        #title1 {
            width: 250px !important;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins m-b-none">
            <div class="ibox-title">
                <span style="font-size:20px;font-weight:bold;">首页广告位配置</span>
            </div>
            <div class="ibox-content">
                <div class="panel-body">
                    <form role="form" id="edit_form" th:object="${homeModel}">
                        <input type="hidden" id="hdConfigId" th:value="*{id}"/>
                        <div class="col-lg-12">
                            <div class="panel-body form-horizontal">
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">视频广告位:</label>

                                    <div class="col-sm-10">
                                        <img id="file1View"
                                             th:src="*{homeConfig.videoUrl+'?x-oss-process=video/snapshot,t_0,m_fast,ar_auto'}"
                                             src="../../resource/img/bg.png"
                                             style="height: 70px;"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#file1').click()">上传</a>
                                        <input class="file" type="file" id="file1" name="img"
                                               style="display: none;"
                                               accept="video/mp4" view-element="#file1View"
                                               val-element="#url1"/>
                                        <input type="hidden" id="url1" name="url1"
                                               th:value="*{homeConfig.videoUrl}"/>


                                    </div>
                                </div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">视频广告位标题:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="title1"
                                               th:value="*{homeConfig.getTitle()}"
                                               class="form-control input-sm input-s"
                                               placeholder="标题"/>
                                    </div>
                                </div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">视频广告位商品ID:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="goodsId1"
                                               th:value="*{homeConfig.goodsId}"
                                               class="form-control input-sm input-s"
                                               placeholder="视频商品ID"/>
                                    </div>
                                </div>


                                <div class="hr-line-dashed "></div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位2:</label>

                                    <div class="col-sm-10">
                                        <!--afterUrl2-->
                                        <img id="file2View"
                                             th:src="*{homeConfig.goodsList[0].thumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#file2').click()">上传</a>
                                        <input class="file" type="file" id="file2" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#file2View"
                                               val-element="#url2"/>
                                        <input type="hidden" id="url2" name="url2"
                                               th:value="*{homeConfig.goodsList[0].thumbnail}"/>


                                        <img id="afterFile2View"
                                             th:src="*{homeConfig.goodsList[0].afterThumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#afterFile2').click()">上传点击后图片</a>
                                        <input class="file" type="file" id="afterFile2" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#afterFile2View"
                                               val-element="#afterUrl2"/>
                                        <input type="hidden" id="afterUrl2" name="afterUrl2"
                                               th:value="*{homeConfig.goodsList[0].afterThumbnail}"/>

                                    </div>
                                </div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位2类目ID:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="goodsId2"
                                               th:value="*{homeConfig.goodsList[0].catId}"
                                               class="form-control input-sm input-s"
                                               placeholder="类目ID"/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed "></div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位3:</label>

                                    <div class="col-sm-10">
                                        <img id="file3View"
                                             th:src="*{homeConfig.goodsList[1].thumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#file3').click()">上传</a>
                                        <input class="file" type="file" id="file3" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#file3View"
                                               val-element="#url3"/>
                                        <input type="hidden" id="url3" name="url3"
                                               th:value="*{homeConfig.goodsList[1].thumbnail}"/>


                                        <img id="afterFile3View"
                                             th:src="*{homeConfig.goodsList[1].afterThumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#afterFile3').click()">上传点击后图片</a>
                                        <input class="file" type="file" id="afterFile3" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#afterFile3View"
                                               val-element="#afterUrl3"/>
                                        <input type="hidden" id="afterUrl3" name="afterUrl3"
                                               th:value="*{homeConfig.goodsList[1].afterThumbnail}"/>


                                    </div>
                                </div>
                                <!--                                <div class="form-group ">-->
                                <!--                                    <label class="col-sm-2 control-label">广告位3价格:</label>-->
                                <!--                                    <div class="col-sm-10">-->
                                <!--                                        <input type="text" id="title3"-->
                                <!--                                               th:value="*{homeConfig.goodsList[1].price}"-->
                                <!--                                               class="form-control input-sm input-s"-->
                                <!--                                               placeholder="价格"/>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位3类目ID:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="goodsId3"
                                               th:value="*{homeConfig.goodsList[1].catId}"
                                               class="form-control input-sm input-s"
                                               placeholder="类目ID"/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed "></div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位4:</label>

                                    <div class="col-sm-10">
                                        <img id="file4View"
                                             th:src="*{homeConfig.goodsList[2].thumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#file4').click()">上传</a>
                                        <input class="file" type="file" id="file4" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#file4View"
                                               val-element="#url4"/>
                                        <input type="hidden" id="url4" name="url4"
                                               th:value="*{homeConfig.goodsList[2].thumbnail}"/>


                                        <img id="afterFile4View"
                                             th:src="*{homeConfig.goodsList[2].afterThumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#afterFile4').click()">上传点击后图片</a>
                                        <input class="file" type="file" id="afterFile4" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#afterFile4View"
                                               val-element="#afterUrl4"/>
                                        <input type="hidden" id="afterUrl4" name="afterUrl4"
                                               th:value="*{homeConfig.goodsList[2].afterThumbnail}"/>


                                    </div>
                                </div>
                                <!--                                <div class="form-group ">-->
                                <!--                                    <label class="col-sm-2 control-label">广告位4价格:</label>-->
                                <!--                                    <div class="col-sm-10">-->
                                <!--                                        <input type="text" id="title4"-->
                                <!--                                               th:value="*{homeConfig.goodsList[2].price}"-->
                                <!--                                               class="form-control input-sm input-s"-->
                                <!--                                               placeholder="价格"/>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位4类目ID:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="goodsId4"
                                               th:value="*{homeConfig.goodsList[2].catId}"
                                               class="form-control input-sm input-s"
                                               placeholder="类目ID"/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed "></div>
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位5:</label>

                                    <div class="col-sm-10">
                                        <img id="file5View"
                                             th:src="*{homeConfig.goodsList[3].thumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#file5').click()">上传</a>
                                        <input class="file" type="file" id="file5" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#file5View"
                                               val-element="#url5"/>
                                        <input type="hidden" id="url5" name="url5"
                                               th:value="*{homeConfig.goodsList[3].thumbnail}"/>


                                        <img id="afterFile5View"
                                             th:src="*{homeConfig.goodsList[3].afterThumbnail}"
                                             style="height: 70px;" src="../../resource/img/bg.png"/>
                                        <a sec:authorize="hasRole('ADMIN')"
                                           href="javascript:$('#afterFile5').click()">上传点击后图片</a>
                                        <input class="file" type="file" id="afterFile5" name="img"
                                               style="display: none;"
                                               accept="image/*" view-element="#afterFile5View"
                                               val-element="#afterUrl5"/>
                                        <input type="hidden" id="afterUrl5" name="afterUrl5"
                                               th:value="*{homeConfig.goodsList[3].afterThumbnail}"/>

                                    </div>
                                </div>
                                <!--                                <div class="form-group ">-->
                                <!--                                    <label class="col-sm-2 control-label">广告位5价格:</label>-->
                                <!--                                    <div class="col-sm-10">-->
                                <!--                                        <input type="text" id="title5"-->
                                <!--                                               th:value="*{homeConfig.goodsList[3].price}"-->
                                <!--                                               class="form-control input-sm input-s"-->
                                <!--                                               placeholder="价格"/>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">广告位5类目ID:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="goodsId5"
                                               th:value="*{homeConfig.goodsList[3].catId}"
                                               class="form-control input-sm input-s"
                                               placeholder="类目ID"/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed "></div>
                                <div class="form-group">
                                    <div style="text-align: left;margin-left: 200px">
                                        <button class="btn btn-success btn-submit" type="button"
                                                id="editBtn">
                                            保存修改
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/lib/imageview/js/imageviewer.min.js"
        th:src="@{/resource/lib/imageview/js/imageviewer.min.js}"></script>
<script src="../../resource/hotui/js/plugins/ajaxfileupload.js"
        th:src="@{/resource/hotui/js/plugins/ajaxfileupload.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const uploadUri = /*[[@{/resource/upload}]]*/  "";
    const editUri = /*[[@{/module/home/edit/}]]*/  "";
</script>

<script type="text/javascript">
    $(function () {
        var viewer = ImageViewer();
        $('.imgView').click(function () {
            let imgSrc = this.src,
                highResolutionImage = $(this).data('low-res-img');

            viewer.show(imgSrc, highResolutionImage);
        });

        $(".file").change(function () {
            let $view = $($(this).attr('view-element'));
            let $val = $($(this).attr('val-element'));
            hot.fileUpload(uploadUri, $(this).attr('id'), null, function (apiResult) {
                //覆盖图片
                if (apiResult.data.previewUrl.lastIndexOf('.mp4') >= 0) {
                    $view.attr("src", apiResult.data.previewUrl + '?x-oss-process=video/snapshot,t_0,m_fast,ar_auto');
                } else {
                    $view.attr("src", apiResult.data.previewUrl);
                }
                $val.val(apiResult.data.previewUrl);
            });
        });

        $("#editBtn").click(function () {
            let id = $("#hdConfigId").val();
            let timingContent = $.trim($("#timingContent").val());
            let title1 = $.trim($("#title1").val());
            let afterUrl2 = $.trim($("#afterUrl2").val());
            let afterUrl3 = $.trim($("#afterUrl3").val());
            let afterUrl4 = $.trim($("#afterUrl4").val());
            let afterUrl5 = $.trim($("#afterUrl5").val());
            let url1 = $.trim($("#url1").val());
            let url2 = $.trim($("#url2").val());
            let url3 = $.trim($("#url3").val());
            let url4 = $.trim($("#url4").val());
            let url5 = $.trim($("#url5").val());

            let goodsId5 = $.trim($("#goodsId5").val());
            let goodsId4 = $.trim($("#goodsId4").val());
            let goodsId3 = $.trim($("#goodsId3").val());
            let goodsId2 = $.trim($("#goodsId2").val());
            let goodsId1 = $.trim($("#goodsId1").val());


            let _pass = true;
            $(".input-sm").each(function () {
                if ($.trim($(this).val()).length === 0) {
                    _pass = false;
                    return false;
                }
            });
            if (!_pass) {
                hot.tip.error("请先完善表单数据");
                return;
            }
            let requestData = {
                id: id,
                title: timingContent,
                title1,
                url1, url2, url3, url4, url5,
                afterUrl2, afterUrl3, afterUrl4, afterUrl5,
                goodsId5, goodsId4, goodsId2, goodsId3, goodsId1
            };
            hot.ajax(editUri, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("保存成功", function () {
                        window.location.reload();
                    });
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        })
    });
</script>
</body>

</html>
